<template>
    <div class="page-header-index-wide">
        <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
            <div class="account-settings-info-main" :class="{ mobile: isMobile }">
                <div class="account-settings-info-left">
                    <a-menu
                        :mode="isMobile ? 'horizontal' : 'inline'"
                        :style="{ border: '0', width: isMobile ? '560px' : 'auto' }"
                        :selectedKeys="openKeys"
                        type="inner"
                        @click="changeMenu"
                    >
                        <a-menu-item key="BaseSetting">基本设置 </a-menu-item>
                        <a-menu-item key="changePassword">修改密码 </a-menu-item>
                    </a-menu>
                </div>
                <div class="account-settings-info-right">
                    <component :is="isCompenent"> </component>
                </div>
            </div>
        </a-card>
    </div>
</template>

<script>
import { RouteView } from '@/layouts'
import { baseMixin } from '@/store/app-mixin'
import BaseSetting from './BaseSetting'
import changePassword from './changePassword'
export default {
    components: {
        RouteView,
        BaseSetting,
        changePassword,
    },
    mixins: [baseMixin],
    data() {
        return {
            // horizontal  inline
            mode: 'inline',
            isCompenent: 'BaseSetting',
            openKeys: ['BaseSetting'],
            selectedKeys: [],
        }
    },
    mounted() {},
    methods: {
        changeMenu(openKeys) {
            this.openKeys = openKeys.keyPath
            this.isCompenent = openKeys.key
        },
    },
}
</script>

<style lang="less" scoped>
.account-settings-info-main {
    width: 100%;
    display: flex;
    height: 100%;
    overflow: auto;

    &.mobile {
        display: block;

        .account-settings-info-left {
            border-right: unset;
            border-bottom: 1px solid #e8e8e8;
            width: 100%;
            height: 50px;
            overflow-x: auto;
            overflow-y: scroll;
        }
        .account-settings-info-right {
            padding: 20px 40px;
        }
    }

    .account-settings-info-left {
        border-right: 1px solid #e8e8e8;
        width: 224px;
    }

    .account-settings-info-right {
        flex: 1 1;
        padding: 8px 40px;

        .account-settings-info-title {
            color: rgba(0, 0, 0, 0.85);
            font-size: 20px;
            font-weight: 500;
            line-height: 28px;
            margin-bottom: 12px;
        }
        .account-settings-info-view {
            padding-top: 12px;
        }
    }
}
</style>
